import React from 'react'
import ReactDOM from 'react-dom'
import ModalBox from './modal'

function createModalInstance() {
    const div = document.createElement('div')
    document.body.appendChild(div)

    // const modalBoxInstance = ReactDOM.render(<ModalBox />, div)
    const modalBoxInstance = ReactDOM.render(
        <React.StrictMode>
            <ModalBox />
        </React.StrictMode>
        , div
    )


    return {
        addNotice(notice) {
            return modalBoxInstance.addNotice(notice)
        },

        destroy() {
            ReactDOM.unmountComponentAtNode(div)
            document.body.removeChild(div)
        },
        
        open(title, message) {
            console.log(modalBoxInstance);
            return modalBoxInstance.open({ title, message })
        },

        close() {
            return modalBoxInstance.close()
        }
    }
}


// let notification
// const notice = (type, content, duration = 2000, onClose) => {
//     if (!notification) notification = createNotification()
//     return notification.addNotice({ type, content, duration, onClose })
// }

// export default {
//     info(content, duration, onClose) {
//         return notice('info', content, duration, onClose)
//     },
//     success(content = '操作成功', duration, onClose) {
//         return notice('success', content, duration, onClose)
//     },
//     error(content, duration , onClose) {
//         return notice('error', content, duration, onClose)
//     },
//     loading(content = '加载中...', duration = 0, onClose) {
//         return notice('loading', content, duration, onClose)
//     }
// }



let modalBoxInstance;

const getModalInstance = () => {
    if (!modalBoxInstance) modalBoxInstance = createModalInstance()
    return modalBoxInstance
}

export default {
    open(title, message) {
        return getModalInstance().open(title, message)
    },

    close() {
        return getModalInstance().close()
    }
}